<template>
    <div class="z-main">
        <div class="p"></div>
        <div class="txt">今昨日充电人数对比图</div>
    </div>
    <div id="z-main">


    </div>

</template>

<script setup>
import { reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    data: Object
})

onMounted(() => {
    let init = echarts.init(document.querySelector('#z-main'))
    let time = props.data.time
    let yesToday = props.data.yesToday
    let today = props.data.today
    init.setOption({
        legend: {
            show: false
        },
        tooltip: {
            trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
            }
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time,
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(255, 255, 255,0.04)']
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {     //网格线
                "show": false
            }
        },
        series: [
            {
                name: '今日数据',
                type: 'line',
                data: today,
            },
            {
                name: '昨日数据',
                type: 'line',
                data: yesToday,
            }
        ]
    })
})
</script>
<style lang="scss" scoped>
#z-main {
    height: 400px;
    // width: 670px;
    max-height: 400px;
    min-height: 400px;
    width: 100%;
}

.z-main {
    background: url(../../../assets/image/t.png) no-repeat;
    background-size: cover;
    width: 455px;
    height: 34px;
    display: flex;
    align-items: center;

    .p {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
        background-color: #fff;
        margin-left: 50px;
    }

    .txt {
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 900;
        font-size: 18px;
        color: #FFFFFF;
    }
}
</style>